進入 aside 中間部分的編寫，想要寫成下方畫面

程式碼滿簡單的，跟前面的程式碼差不多，但這次加入了畫面優化跟效果，

先來看一下 HTML 程式碼

 <ul class="just-listen">
                    <li><a href="#">播放暫存區(20)</a></li>
                    <li><a href="#">播放紀錄</a></li>
                    <div class="line"></div>
                </ul>
                <!-- just-listen end -->

                <h2>我的音樂庫</h2>
                <ul class="my-list">
                    <li><a href="#">周杰倫-同名專輯</a></li>
                    <li><a href="#">周興哲-你好不好</a></li>
                    <li><a href="#">七月半-首張專輯</a></li>
                    <li><a href="#">祭壇音樂-同名專輯</a></li>
                    <li><a href="#">PTX-Hallelujah</a></li>
                    <li><a href="#">Bethel-Raise A Hallelujah</a></li>
                    <li><a href="#">盧廣仲-100種生活</a></li>
                    <li><a href="#">蕭敬騰-王妃</a></li>
                    <li><a href="#">蔡依林-腦公</a></li>
                    <li><a href="#">Greeen-奇蹟</a></li>
                    <li><a href="#">桑田佳祐-明天會是晴天吧?</a></li>
                    <li><a href="#">Good Doctor-原聲帶</a></li>
                    <div class="line"></div>
                </ul>
                <!-- my-list end -->

是不是發現幾乎是複製貼上過來的? 對，就是複製貼上過來，只有清單內容有重新修正過而已，
但有一個地方滿推薦這樣寫，我習慣在每一個段落加上 <!--註解end--!> 讓我自己知道這個段落結束了，
以防未來回來維護的時候找不到程式碼。

為了優化目前清單的樣式，我在 SCSS 加入了 a:hover 的效果，
SCSS 如下

.just-listen {
    margin-top: 20px;

    li {
        line-height: 2;
    }

    a {
        color: $lead-color;

        &:hover {
            background-color: $lead-color;
            color: #fff;
            display: block;
                   }
        }
}

.my-list {
    li {
        line-height: 2;
    }

    a {
        color: $lead-color;
        &:hover {
            background-color: $lead-color;
            color: #fff;
            display: block;
                   }
    }
}

這邊 hover 有設定 display:block，是為了讓滑鼠經過自已的時候可以整條 bar，完整呈現在畫面上，讓畫面的可讀更明確，也讓 hover 效果下的文字呈現白色，讓文字更清楚。

今天的鐵人賽很簡單 :)

附上 codepen
https://codepen.io/hnzxewqw/pen/wvwxObv